<template>
	<div class="channel">
		<div class="box">
			<p>复制推广链接发给朋友<span style="color: #56627c;"></span></p>
			<p style="font-size: 0.4rem; color: #007fff; display: flex; justify-content: center; align-items: center;"><span id="copy-text">{{text}}</span><button class="copy"id="copy"   data-clipboard-action="copy" data-clipboard-target="#copy-text">复制</button></p>
			<p style="margin-bottom: .4rem;">推荐朋友扫码，成为你的用户</p>
			<!--<img src="../../assets/QR code.png"/>-->
			<div id="qrcode" style="margin-bottom: 49px;">
				<img :src="qrCodeUrl"/>
			</div>
		</div>
		<img src="../../assets/tuiguang.png"/>
		<!--<div class="buy">
			<span>----</span>
			<p>如何赚钱</p>
			<span>----</span>
		</div>
		<div class="buy_img">
			<ul>
				<li>
					<img class="img1" src="../../assets/promotion_icon1.png"/>
					<p>发送推广<br />链接给好友</p>
				</li>
				<li class="tobottom1">
					<img  src="../../assets/promotion_arrow_down.png"/>
				</li>
				<li class="img2">
					<img  src="../../assets/promotion_icon2.png"/>
					<p>点击链接<br />注册成为你的用户</p>
				</li>
				<li class="tobottom2">
					<img class="" src="../../assets/promotion_arrow_up.png"/>
				</li>
				<li>
					<img class="img3"  src="../../assets/promotion_icon3.png"/>
					<p>你的用户<br />开始交易</p>
				</li>
				<li class="tobottom3">
					<img src="../../assets/promotion_arrow_down.png"/>
				</li>
				<li class="img4">
					<img  src="../../assets/promotion_icon4.png"/>
					<p>开启<br />赚钱模式</p>
				</li>
			</ul>
		</div>	
		<div class="buy">
			<span>----</span>
			<p>推广渠道</p>
			<span>----</span>
		</div>
		<div class="method">
			<p>朋友、微信、朋友圈、QQ、微博、博客、论坛</p>
			<p>或在自己的网站上推广</p>
		</div>-->
	</div>
</template>

<script>
import "../../util/clipboard.min.js"
import { toast } from '@/util/index'    
import find from '@/api/find/index'
  export default {
    data () {
      return {
        index:0,
        text:"",
        qrCodeUrl:"",
      }
    },
    methods: {
    	copyInit(){
    		var clipboard = new Clipboard('.copy');
          	clipboard.on('success', function (e) {
           
            toast('复制到剪切板成功');
          });
          clipboard.on('error', function (e) {
            
            toast('复制到剪切板失败，请手动复制');
          });
    		
    	},
    	_getQart(data) {
    		var tum=""
    		var dpr= $("html").attr("data-dpr");
    		
    		if(dpr==1){
    			tum=140;
    		}else if(dpr==2){
    			tum=260;
    		}else if(dpr==3){
    			tum=380;
    		}
	          var qrcode = new QRCode( document.getElementById("qrcode"), {
	            width :tum,//设置宽高
	            height :tum
	          });
	          qrcode.makeCode(data);
        },
     	
    },
    mounted(){
    	this.copyInit();
    	
    	let senddata = {
    		userId:window.localStorage.getItem("token"),
    		plat:"mlj"
    	}
	    find.toSpread(senddata).then((res) => {
	        if (res.data.code == 200) {
	         this.text=res.data.data.url+"register1?inviteCode="+res.data.data.inviteCode;
	          //this._getQart(res.data.data.url+"/#/register1?inviteCode="+res.data.data.inviteCode);
	         this.qrCodeUrl=res.data.data.qrCode;  
	        }else if (res.data.code == 401) {
	          toast(res.data.message);
	          var that = this;
	          setTimeout(function () {
	            that.$router.push({path: '/'})
	          }, 1000);
	        }else {
	          toast(res.data.message)
	        }
	    })
  	}
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
	.channel{
		background:#141723;
		color: white;
		
		width:100%;
		img{
			display: block;
			width: 100%;
			height: 100%;
		}
		.box{
			background: #0c101c;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			p{
				color: white;
				font-size: @f28;
				margin-top: @hwrap/2;
				#copy{
				    background: #0c101c;
				    border: none;
				    color: #007fff;
				    vertical-align: middle;
				  }
				  
				#copy-text{
					display: inline-block;
					width: 5rem;
					white-space:nowrap;
				    overflow:hidden;
				    text-overflow:ellipsis;
				}  
			}
			#qrcode{
				img{
					display: block;
					width:3.73333rem ;
					height: 3.73333rem;				}
				
				
				
			}
				
		}
		.buy{
			margin:.6rem 0rem;
			display:flex;
			justify-content: center;
			align-items: center;
			font-size:@f32;
			p{
				margin: 0 @f28;
			}
		}
		.buy_img{
			padding: 0 @p30;
			margin-top: .8rem;
			margin-bottom:.4rem;
			ul{
				width:100%;
				display:flex;
				justify-content:center;
				align-items: flex-start;
				li{
					text-align: center;
				}
				.img2,.img4{
						padding-top:.8rem;
				}
				.tobottom1{
					padding-top: .6rem;
				}
				.tobottom2{
					padding-top: .4rem;
				}
				.tobottom3{
					padding-top: .4rem;
				}
				
			}
		}
		.method{
			width: 9.2rem;
			height: 1.44rem;
			text-align: center;
			padding: @f28 0;
			border: 3px solid white;
			margin:0 auto;
			border-radius: 0.72rem;
			
		}
		
	}
</style>